<template>
  <view class="nav">
    <view
      class="content"
      :style="{ 'justify-content': show ? 'space-evenly' : '' }"
    >
      <block v-for="(item, i) in navData" :key="i">
        <view
          :class="{ text: true }"
          :style="{ width: width + '%' }"
          @click="handleNav(i,item.id,item.title)"
        >
          <text :class="{ black: i == switchIdx }">{{ item.title }}</text>
          <view v-if="i == switchIdx" class="active"></view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  name: "nav",
  props: {
    navData: {
      type: Array,
      default: () => [],
    },
    show: {
      type: Boolean,
      default: true,
    },
    width: {
      type: Number,
      default: 25,
    },
  },
  data() {
    return {
      switchIdx: 0,
    };
  },
  methods: {
    handleNav(i,id,val) {
      this.switchIdx = i;
      this.$emit("click", i,id,val);
    },
  },
};
</script>

<style lang="scss" scoped>
.nav {
  width: 100%;
  padding-bottom: 10rpx;
  // height: 48rpx;
  // margin: 30rpx 0;
  // overflow: auto;

  .content {
    width: 100%;
    display: flex;
    // justify-content: space-evenly;
    overflow-y: auto;

    .text {
      width: 25%;
      flex-shrink: 0;
      // height: 48rpx;
      font-size: 32rpx;
      color: #8890a5;
      text-align: center;
      line-height: 48rpx;
      .black {
        color: #000000 !important;
      }
      .active {
        width: 56rpx;
        height: 8rpx;
        background-image: linear-gradient(
          to right,
          rgba(42, 132, 224, 1),
          rgba(42, 132, 224, 0)
        );
        margin: 8rpx auto 0;
        border-radius: 20rpx;
      }
    }
  }
}
</style>
